<!--
 * @description 课程分类
 * @author dumeng
 * @date 2022/11/12
 -->
<template>
  <div class="mulClassifyComp-page" :style="{'margin-left': margins, 'margin-right': margins, paddingTop, paddingRight, paddingBottom, paddingLeft, height: height, 'position': isFixed==='1' && isInitData ?'absolute' :undefined,'top': isFixed==='1' && isInitData ? fixedToTop : undefined, 'margin-top': top }">
    <div
      class="w-item"
      :class="{ active: classId !== '' }"
      @click="classClick"
    >
      <span class="etc">{{ className }}</span>
      <i class="classify-icon" :class="[classId !== '' && 'active']" />
    </div>
    <div
      class="w-item"
      :class="[chooseTag.length > 0 && 'active']"
      @click="sizerClick"
    >
      <span>筛选</span>
      <i class="filter-icon" :class="[chooseTag.length && 'active']" />
    </div>
    <div
      class="w-item"
      :class="[newest && 'active']"
      @click="handleNewest"
    >
      <span>最新</span>
    </div>
    <div
      class="w-item"
      :class="[hot && 'active']"
      @click="handleHot"
    >
      <span>最热</span>
    </div>
    <!-- <classify
      v-show="showClass"
      :key="classKey"
      :list="classList"
      @classBack="classBack(arguments)"
    /> -->
    <FourLevelClassify v-if="showClass" :data="classList" :option="option" @classBack="classBack"></FourLevelClassify>
    <div v-if="showSizer" class="sizer" @click="showSizer = !showSizer">
      <div class="sizer-box" @click.stop>
        <div class="labels-container">
          <div v-for="item in labelList" class="box-labels">
            <div class="label-item">
              <div class="l-title">{{ item.name }}</div>
              <div class="l-list">
                <template v-if="item.labelInfo && item.labelInfo.length">
                  <div
                    v-for="(ite, i) in item.labelInfo.split(',')"
                    :key="i"
                    class="label"
                    :class="{
                      active:
                        chooseTag.findIndex((choose) => {
                          return choose.id === item.id + ite;
                        }) > -1,
                    }"
                    @click="clickTag(ite, item.id)"
                  >
                    {{ ite }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="box-btns">
          <div class="btn-item reset" @click="resetFun">重置</div>
          <div
            class="btn-item confirm"
            @click="handleSizer"
          >
            确定
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Classify from './components/classify'
import mixins from '@/components/CustomPage/apps/widget/mixins'
import FourLevelClassify from './components/fourLevelClassify/index.vue'
export default {
  name: 'MulClassifyComp',
  components: { Classify, FourLevelClassify },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: Object,
      default: () => { }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showClass: false, // 是否展示选择分类弹窗
      classList: [], // 分类集合
      classKey: new Date().getTime(),
      classId: '', // 选择的分类ID
      className: '', // 选择的分类名称
      chooseTag: [], // 选择的标签
      showSizer: false, // 是否筛选标签
      labelList: [], // 标签的集合
      newest: false, // 是否选中最新
      hot: false, // 是否选中最热
      active: 1 // 课程所属 0平台 1企业
    }
  },
  computed: {
    height() {
      return this.px2rem(this.option.height || 88)
    },
    placeholder() {
      return this.option.placeholder || ''
    },
    isFixed() {
      return this.option.isFixed || ''
    },
    fixedToTop() {
      return this.px2rem(this.option.fixedToTop || 0)
    }
  },
  async created() {
    /**
     * o: 课程来源 saas或company
     * t: 按什么类型选中   c: 课程分类  l:课程标签
     * i: 如果t存在，必须传i，i为课程分类id或课程标签名称。
     * 涉及到历史配置问题，如果o为origin，选中平台分类，如果没有传o，为单位分类。
     */
    /* if (this.$route.query.o) {
      this.active = this.$route.query.o === 'saas' ? 0 : 1
    } else {
      this.active = this.$route.query.t && this.$route.query.i ? 1 : 0
    }*/
    if (this.isInitData) {
      if (this.active === 1) {
        await this.getDataByCode('classifyDataList4company').then(() => {
          if (this.$route.query.t === 'c' && this.$route.query.i) {
            const activeList =
                this.getParentId(this.classList, this.$route.query.i) || []
            // this.classifyActive = Object.assign([], activeList)
            if (activeList.length) {
              this.className = activeList[0].classifyName
              this.classId = activeList[0].id
            }
          }
        })
        await this.getDataByCode('labelList4company')
      } else {
        await this.getDataByCode('classifyDataList4platform').then(() => {
          if (this.$route.query.t === 'c' && this.$route.query.i) {
            const activeList =
                this.getParentId(this.classList, this.$route.query.i) || []
            // this.classifyActive = Object.assign([], activeList)
            if (activeList.length) {
              this.className = activeList[0].classifyName
              this.classId = activeList[0].id
            }
          }
        })
        await this.getDataByCode('labelList4platform')
      }
    } else {
      this.className = '全部'
    }
  },
  methods: {
    setData(result) {
      if (result?.classifyDataList4company) {
        this.getTree(result?.classifyDataList4company)
      } else if (result?.classifyDataList4platform) {
        this.getTree(result?.classifyDataList4platform)
      } else if (result?.labelList4company) {
        this.getLabel(result?.labelList4company)
      } else if (result?.labelList4platform) {
        this.getLabel(result?.labelList4platform)
      }
    },
    // 获取分类
    getTree(res) {
      this.className = '全部'
      this.classId = ''
      this.classList = res.data || []
    },
    getParentId(list, id) {
      for (const i in list) {
        if (list[i].id === id) {
          return [list[i]]
        }
        if (list[i].children) {
          const node = this.getParentId(list[i].children, id)
          if (node !== undefined) {
            return node.concat(list[i])
          }
        }
      }
    },
    // 获取标签
    getLabel(res) {
      if (res.code === '200') {
        try {
          this.labelList = res.data
        } catch (e) {
          this.labelList = []
        }
        // 从首页标签分类中进来
        if (this.$route.query.t === 'l' && this.$route.query.i) {
          this.labelList.forEach((item) => {
            if (item.labelInfo.indexOf(this.$route.query.i) > -1) {
              this.chooseTag.push({
                name: this.$route.query.i,
                id: item.id + this.$route.query.i
              })
            }
          })
        }
      }
    },
    classBack(obj) {
      this.showClass = !this.showClass
      // if (arr[0] === -1) {
      //   this.classId = ''
      // } else {
      //   this.classId = arr[0]
      // }
      // this.className = arr[1]
      this.classId = obj.id
      this.className = obj.name
      console.log(this.classId)
      // todo
      this.dispatch_event('filed-value-change', this)
    },
    // 点击分类按钮
    classClick() {
      if (!this.isInitData) {
        return
      }
      if (this.classList.length === 0) {
        this.$toast('暂无分类！')
        return
      }
      this.showClass = !this.showClass
    },
    // 点击筛选按钮
    sizerClick() {
      if (!this.isInitData) {
        return
      }
      this.showClass = false
      this.showSizer = true
    },
    // 点击标签的时候
    clickTag(name, id) {
      const index = this.chooseTag.findIndex((item) => {
        return item.id === id + name
      })
      if (index === -1) {
        this.chooseTag.push({
          name,
          id: id + name
        })
      } else {
        this.chooseTag.splice(index, 1)
      }
    },
    // 重置的方法
    resetFun() {
      this.classKey = new Date().getTime()
      this.showSizer = false
      this.chooseTag = []
      this.dispatch_event('filed-value-change', this)
    },
    /**
     * 筛选
     */
    handleSizer() {
      if (!this.isInitData) {
        return
      }
      this.showSizer = false
      this.dispatch_event('filed-value-change', this)
    },
    /**
     * 选择最新
     */
    handleNewest() {
      if (!this.isInitData) {
        return
      }
      this.newest = !this.newest
      this.hot = false
      this.dispatch_event('filed-value-change', this)
    },
    /**
     * 选择最热
     */
    handleHot() {
      if (!this.isInitData) {
        return
      }
      this.hot = !this.hot
      this.newest = false
      this.dispatch_event('filed-value-change', this)
    },
    getValue() {
      const { classId, className, chooseTag, newest, hot } = this
      return {
        classId, className, chooseTag, newest, hot
      }
    }
  }

}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.mulClassifyComp-page {
  position: relative;
  background: white;
  display: flex;
  width: 100%;
  z-index: 2;
  .w-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: rem(26);
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #999999;
    &.active {
      @include font-color($mainColor);
    }
    > span {
      display: inline-block;
      max-width: rem(160);
      text-align: center;
    }
    .classify-icon {
      flex: 0 0 auto;
      vertical-align: middle;
      display: inline-block;
      margin-left: rem(15);
      height: rem(8);
      width: rem(10);
      background: url("./images/fenlei.png") no-repeat;
      background-size: 100% 100%;
      &.active {
        @include bg-image("./", "/fenlei-a.png");
      }
    }
    .filter-icon {
      vertical-align: middle;
      display: inline-block;
      margin-left: rem(15);
      height: rem(8);
      width: rem(10);
      background: url("./images/filter.png") no-repeat;
      background-size: 100% 100%;
      &.active {
        @include bg-image("./", "/filter-a.png");
      }
    }
    > img {
      vertical-align: middle;
      display: inline-block;
      margin-left: rem(15);
      height: rem(8);
      width: rem(10);
    }
  }
  .sizer {
    position: absolute;
    top: rem(88);
    left: 0;
    right: 0;
    height: rem(1000);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    filter: alpha(opacity=60);
    z-index: 10;
    .sizer-box {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: rem(140);
      background: #fff;

      overflow: hidden;
      .labels-container {
        position: absolute;
        top: 0;
        bottom: rem(88);
        left: 0;
        right: 0;
        padding-bottom: rem(30);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        .box-labels {
          padding: 0 rem(30);
          margin-top: rem(30);
          .label-item {
            .l-title {
              font-size: rem(28);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: bold;
              text-align: left;
            }
            .l-list {
              padding-top: rem(30);
              display: flex;
              flex-wrap: wrap;
              row-gap: rem(38);
              column-gap: rem(20);
              .label {
                padding: rem(10) rem(20);
                min-width: rem(170);
                min-height: rem(62);
                border: rem(1) solid #e5e5e5;
                border-radius: rem(32);
                font-size: rem(26);
                font-family: PingFang SC Regular, PingFang SC Regular-Regular;
                font-weight: 400;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #333333;
                &.active {
                  @include votebg-color("#f5fbff");
                  @include border-color(1px, solid, #2c78ff);
                  @include font-color($mainColor);
                }
              }
            }
          }
        }
      }
      .box-btns {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: rem(88);
        display: flex;
        .btn-item {
          flex: 1;
          height: 100%;
          font-size: rem(30);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
          &.reset {
            background: #ffffff;
            box-shadow: 0 rem(-1) 0 0 #e5e5e5;
            color: #666666;
          }
          &.confirm {
            @include bg-color($mainColor);
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
